<div class="view-body">
    <div class="view-inner">
        <div class="view-cont system-admin-cont system-menu">
            <header class="view-cont-hd clearfix">
                <!--页面标题-->
                <h2 class="pull-left"><span class="line"></span>菜单管理</h2>
                <!--面包屑-->
                <ol class="breadcrumb">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li class="active">
                        <strong>菜单管理</strong>
                    </li>
                </ol>
            </header>
            <section class="view-cont-bd">
                <div class="row-pane panel">

                    <div class="panel-body clearfix">
                        <div class="grid-c">
                            <ui-select ng-model="vm.platList.selected" on-select="vm.onSelected($item)">
                                <ui-select-match placeholder="选择或输入系统名">{{$select.selected.platName}}</ui-select-match>
                                <ui-select-choices repeat="plat in vm.platList | propsFilter: {platName: $select.search}">
                                    <div ng-bind-html="plat.platName | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                            <div class="org-tree">
                                <div class="load load-md" ng-if="vm.isTreeLoading">
                                    <i class="fa fa-spin fa-spinner"></i><span class="load-text">数据加载中...</span>
                                </div>
                                <div ng-if="!vm.isTreeLoading && vm.platList.selected" ui-tree data-drag-enabled="false">
                                    <ol ui-tree-nodes ng-model="vm.treeNode">
                                        <li class="tree-root" ng-repeat="node in vm.treeNode track by $index" ui-tree-node data-collapsed="false" ng-include="'nodes_renderer_ajax.html'">
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <div class="grid-m">
                            <div class="handle-bar handle-bar-bg margin-bottom-15">
                                <button class="btn btn-default pull-right" type="button" ng-click="vm.openView('comp')" ng-disabled="!vm.platList.selected"><i class="fa fa-plus"></i>增加控件</button>
                                <button class="btn btn-default pull-right" type="button" ng-click="vm.openView('menu')" ng-disabled="!vm.platList.selected"><i class="fa fa-plus"></i>增加菜单</button>
                                <div class="hint hint-inline va-m" ng-class="{show: vm.treeData.parMenuId != null}">
                                    <span><i class="fa fa-map-marker"></i></span><strong class="margin-left-5" ng-bind-html="vm.currentNode"></strong>
                                </div>
                            </div>
                            <div class="table-wrap">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th style="width:15%">名称</th>
                                        <th style="width:15%">标识</th>
                                        <th style="width:20%">描述</th>
                                        <th style="width:20%">链接</th>
                                        <th style="width:10%">类型</th>
                                        <th style="width:20%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="empty" ng-if="!vm.menuList.length">
                                        <td colspan="6" class="text-center empty">
                                            <div class="hint">
                                                <span ng-if="vm.child"><i class="fa fa-exclamation-circle"></i>在左侧选择系统并点击树状菜单,以显示数据</span>
                                                <span ng-if="!vm.child"><i class="fa fa-exclamation-circle"></i>暂无数据</span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr ng-if="vm.menuList.length" ng-repeat="item in vm.menuList track by $index">
                                        <td><div class="ellipsis">{{item.menuName || item.compName || '无'}}</div></td>
                                        <td><div class="ellipsis">{{item.selectValue || '无'}}</div></td>
                                        <td><div class="ellipsis">{{item.menuDesc || item.compDesc || '无'}}</div></td>
                                        <td><div class="ellipsis">{{item.urlAddr}}</div></td>
                                        <td><span ng-if="!item.compId" class="label label-success">菜单</span><span ng-if="item.compId" class="label label-default">控件</span></td>
                                        <td>
                                            <div class="btn-action" ng-hide="item.confirm">
                                                <button type="button" class="btn btn-default btn-xs" ng-click="vm.openView(item.compId,item)"><i class="fa fa-pencil"></i>编辑</button>
                                                <button type="button" class="btn btn-danger btn-xs" ng-click="vm.toggleConfirm(item)"><i class="fa fa-trash"></i>删除</button>
                                            </div>
                                            <div class="btn-action" ng-hide="!item.confirm">
                                                <button class="btn btn-default btn-xs" ng-click="vm.toggleConfirm(item)"><i class="fa fa-times"></i>取消</button>
                                                <button class="btn btn-primary btn-xs" ng-click="vm.deleteNode(item.compId,item)"><i class="fa fa-check"></i>确定</button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script type="text/ng-template" id="nodes_renderer_ajax.html">
    <div ui-tree-handle class="tree-node tree-node-content">
        <span data-nodrag class="tree-ico" ng-if="!node.compId" ng-class="{'tree-file-o': !node.hadComp && !node.hasChildren, 'tree-folder-o': collapsed, 'tree-folder-open-o': !collapsed }" ng-click="vm.toggleNode(this, node, $event)"></span>
        <span data-nodrag class="tree-ico tree-cube" ng-if="node.compId" ng-click="vm.toggleNode(this, node, $event)"></span>
        <a data-nodrag class="tree-node-handle" href="javascript:void(0)" ng-click="vm.selectNode(this, node, $event)">
            <span class="tree-node-name">{{node.menuName || node.compName}}</span>
        </a>
        <span ng-show="node.loading"><i class="fa fa-spin fa-spinner"></i></span>
    </div>
    <ol class="tree-line" ui-tree-nodes ng-model="node.nodes" ng-if="node.hasChildren || node.hadComp" ng-class="{'hidden': collapsed}">
        <li class="tree-menu-node" collapsed="true" ng-repeat="node in node.nodes track by $index" ng-class="{'has-child': node.hasChildren || node.hadComp} " ui-tree-node ng-include="'nodes_renderer_ajax.html'">
        </li>
    </ol>
</script>